<template>
  <div>
    <el-card class="box-card">
      <el-row>
        <h2>欢迎来到水果商城</h2>
      </el-row>
      <el-row>
        用户名：
        <el-input v-model="username" placeholder="请输入用户名"></el-input
      ></el-row>
      <el-row>
        密码：
        <el-input
          placeholder="请输入密码"
          v-model="password"
          show-password
        ></el-input>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-button type="primary" round @click="userLogin"
            >登录</el-button
          ></el-col
        >
        <el-col :span="12"> <el-button round>注册</el-button></el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "Login",
  data() {
    return {
      username: "",
      password: "",
    };
  },
  methods: {
    //登录方法：
    userLogin() {
      if (this.acount == "") {
        alert("用户名不能为空");
        return;
      } else if (this.password == "") {
        alert("密码不能为空");
        return;
      } else {
        //模拟向后台请求数据  
        alert("登录成功")
        //使用localstorage存储
        let userData = {
          username: this.username,
          password: this.password,
        };
        //如果localStorage监测到userToken就认为登录成功了
        localStorage.setItem("userToken", JSON.stringify(userData)); //使用json，便于观察数据
        //localStorage.setItem("userToken", userData);
        console.log(userData)
        this.$router.push("/home/list") //路由跳转
      }
    },
  },
};
</script>

<style>
.box-card {
  margin: 5% 25% 5% 25%;
  width: 50%;
}
</style>